<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儿童模式与分类游戏</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #f0f9ff;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            color: white;
        }
        .game-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .game-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.15);
        }
        .game-title {
            color: #ff6b6b;
            margin-top: 0;
            border-bottom: 2px dashed #ffcc5c;
            padding-bottom: 10px;
        }
        .game-steps {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            border-left: 5px solid #74b9ff;
        }
        .game-steps h3 {
            margin-top: 0;
            color: #0984e3;
        }
        .game-steps ol {
            padding-left: 20px;
        }
        .game-content {
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .pattern-item {
            display: inline-block;
            margin: 10px;
            font-size: 30px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .pattern-item:hover {
            transform: scale(1.2);
        }
        .option-btn {
            background: #74b9ff;
            color: white;
            border: none;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .option-btn:hover {
            background: #0984e3;
            transform: scale(1.05);
        }
        .game-btn {
            background: linear-gradient(45deg, #a18cd1, #fbc2eb);
            color: white;
            border: none;
            padding: 12px 25px;
            margin-top: 15px;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .game-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }
        .feedback {
            margin-top: 15px;
            font-size: 18px;
            min-height: 25px;
            text-align: center;
        }
        .correct {
            color: #00b894;
            animation: bounce 0.5s;
        }
        .incorrect {
            color: #d63031;
            animation: shake 0.5s;
        }
        .category-box {
            width: 100%;
            min-height: 100px;
            border: 2px dashed #74b9ff;
            border-radius: 10px;
            margin: 10px 0;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
        }
        .draggable-item {
            background: #ffeaa7;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 15px;
            cursor: move;
            transition: all 0.3s;
        }
        .draggable-item:hover {
            background: #fdcb6e;
            transform: scale(1.05);
        }
        .category-title {
            background: #a29bfe;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            margin-bottom: 5px;
            display: inline-block;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        .progress-container {
            width: 100%;
            height: 10px;
            background: #dfe6e9;
            border-radius: 5px;
            margin: 15px 0;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #74b9ff, #a29bfe);
            border-radius: 5px;
            width: 0%;
            transition: width 0.5s;
        }
        .emoji-pattern {
            font-size: 40px;
            margin: 10px;
        }
        .pattern-options {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .color-dot {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>儿童模式延续与分类游戏</h1>
        <p>培养孩子的逻辑思维和分类能力</p>
    </div>

    <div class="game-container">
        <!-- 游戏1: 形状模式延续 -->
        <div class="game-card">
            <h2 class="game-title">形状模式延续</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察上方显示的形状模式序列</li>
                    <li>找出形状排列的规律</li>
                    <li>从下方选项中选择正确的形状来延续模式</li>
                    <li>点击"检查答案"查看是否正确</li>
                    <li>点击"新的模式"可以换一个新题目</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div id="shapePattern">
                    <div class="emoji-pattern">🔺 ⏹ 🔺 ⏹ 🔺 ___</div>
                </div>
                <div class="pattern-options" id="shapeOptions">
                    <!-- 选项会动态生成 -->
                </div>
                <div id="shapeFeedback" class="feedback"></div>
                <button class="game-btn" onclick="checkShapeAnswer()">检查答案</button>
                <button class="game-btn" onclick="newShapePattern()">新的模式</button>
            </div>
        </div>

        <!-- 游戏2: 颜色模式延续 -->
        <div class="game-card">
            <h2 class="game-title">颜色模式延续</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察上方显示的颜色点序列</li>
                    <li>找出颜色变化的规律</li>
                    <li>从下方选项中选择正确的颜色来延续模式</li>
                    <li>点击"检查答案"查看是否正确</li>
                    <li>点击"新的模式"可以换一个新题目</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div id="colorPattern">
                    <!-- 颜色点会动态生成 -->
                </div>
                <div class="pattern-options" id="colorOptions">
                    <!-- 选项会动态生成 -->
                </div>
                <div id="colorFeedback" class="feedback"></div>
                <button class="game-btn" onclick="checkColorAnswer()">检查答案</button>
                <button class="game-btn" onclick="newColorPattern()">新的模式</button>
            </div>
        </div>

        <!-- 游戏3: 数字模式延续 -->
        <div class="game-card">
            <h2 class="game-title">数字模式延续</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察上方显示的数字序列</li>
                    <li>找出数字变化的规律（可能是加减或乘除）</li>
                    <li>从下方选项中选择正确的数字来延续模式</li>
                    <li>点击"检查答案"查看是否正确</li>
                    <li>点击"新的模式"可以换一个新题目</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div id="numberPattern">
                    <!-- 数字序列会动态生成 -->
                </div>
                <div class="pattern-options" id="numberOptions">
                    <!-- 选项会动态生成 -->
                </div>
                <div id="numberFeedback" class="feedback"></div>
                <button class="game-btn" onclick="checkNumberAnswer()">检查答案</button>
                <button class="game-btn" onclick="newNumberPattern()">新的模式</button>
            </div>
        </div>

        <!-- 游戏4: 动物分类 -->
        <div class="game-card">
            <h2 class="game-title">动物分类游戏</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察下方的动物卡片</li>
                    <li>将动物拖放到正确的分类区域</li>
                    <li>农场动物：生活在农场里的动物</li>
                    <li>野生动物：生活在野外的动物</li>
                    <li>完成后点击"检查分类"查看是否正确</li>
                    <li>点击"重新开始"可以重新分类</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div class="category-title">农场动物</div>
                <div id="farmCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                
                <div class="category-title">野生动物</div>
                <div id="wildCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                
                <div style="margin-top: 15px;">
                    <div id="animalItems">
                        <!-- 动物卡片会动态生成 -->
                    </div>
                </div>
                <button class="game-btn" onclick="checkAnimalClassification()">检查分类</button>
                <button class="game-btn" onclick="resetAnimalGame()">重新开始</button>
                <div id="animalFeedback" class="feedback"></div>
            </div>
        </div>

        <!-- 游戏5: 水果蔬菜分类 -->
        <div class="game-card">
            <h2 class="game-title">食物分类游戏</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察下方的食物卡片</li>
                    <li>将食物拖放到正确的分类区域</li>
                    <li>水果：通常是甜的，可以生吃</li>
                    <li>蔬菜：通常是植物的一部分，需要烹饪</li>
                    <li>完成后点击"检查分类"查看是否正确</li>
                    <li>点击"重新开始"可以重新分类</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div class="category-title">水果</div>
                <div id="fruitCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                
                <div class="category-title">蔬菜</div>
                <div id="vegetableCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                
                <div style="margin-top: 15px;">
                    <div id="foodItems">
                        <!-- 食物卡片会动态生成 -->
                    </div>
                </div>
                <button class="game-btn" onclick="checkFoodClassification()">检查分类</button>
                <button class="game-btn" onclick="resetFoodGame()">重新开始</button>
                <div id="foodFeedback" class="feedback"></div>
            </div>
        </div>

        <!-- 游戏6: 季节物品分类 -->
        <div class="game-card">
            <h2 class="game-title">季节物品分类</h2>
            
            <div class="game-steps">
                <h3>游戏步骤：</h3>
                <ol>
                    <li>观察下方的物品卡片</li>
                    <li>将物品拖放到正确的季节分类区域</li>
                    <li>冬季：寒冷季节使用的物品</li>
                    <li>夏季：炎热季节使用的物品</li>
                    <li>完成后点击"检查分类"查看是否正确</li>
                    <li>点击"重新开始"可以重新分类</li>
                </ol>
            </div>
            
            <div class="game-content">
                <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
                    <div style="margin: 5px;">
                        <div class="category-title">冬季</div>
                        <div id="winterCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                    </div>
                    <div style="margin: 5px;">
                        <div class="category-title">夏季</div>
                        <div id="summerCategory" class="category-box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
                
                <div style="margin-top: 15px;">
                    <div id="seasonItems">
                        <!-- 季节物品卡片会动态生成 -->
                    </div>
                </div>
                <button class="game-btn" onclick="checkSeasonClassification()">检查分类</button>
                <button class="game-btn" onclick="resetSeasonGame()">重新开始</button>
                <div id="seasonFeedback" class="feedback"></div>
            </div>
        </div>
    </div>

    <script>
        // 游戏数据
        const shapePatterns = [
            { pattern: ["🔺", "⏹", "🔺", "⏹", "🔺"], answer: "⏹", options: ["⏹", "🔺", "🔵"] },
            { pattern: ["🔵", "🔺", "🔵", "🔺"], answer: "🔵", options: ["🔵", "🔺", "⏹"] },
            { pattern: ["⭐️", "🌙", "⭐️", "🌙", "⭐️"], answer: "🌙", options: ["🌙", "⭐️", "☀️"] },
            { pattern: ["🟥", "🟦", "🟧", "🟥", "🟦"], answer: "🟧", options: ["🟧", "🟨", "🟩"] },
            { pattern: ["🔴", "🔴", "🟢", "🔴", "🔴"], answer: "🟢", options: ["🟢", "🟠", "🟣"] }
        ];

        const colorPatterns = [
            { pattern: ["red", "blue", "red", "blue", "red"], answer: "blue", options: ["red", "blue", "green"] },
            { pattern: ["green", "yellow", "green", "yellow", "green"], answer: "yellow", options: ["yellow", "green", "red"] },
            { pattern: ["blue", "blue", "red", "blue", "blue"], answer: "red", options: ["red", "blue", "yellow"] },
            { pattern: ["red", "yellow", "blue", "red", "yellow"], answer: "blue", options: ["blue", "green", "purple"] },
            { pattern: ["green", "green", "orange", "green", "green"], answer: "orange", options: ["orange", "pink", "brown"] }
        ];

        const numberPatterns = [
            { pattern: [1, 3, 5, 7], answer: 9, options: [9, 8, 10] },
            { pattern: [2, 4, 8, 16], answer: 32, options: [32, 24, 20] },
            { pattern: [1, 1, 2, 3, 5], answer: 8, options: [8, 7, 10] },
            { pattern: [10, 8, 6, 4], answer: 2, options: [2, 3, 1] },
            { pattern: [3, 6, 9, 12], answer: 15, options: [15, 18, 14] }
        ];

        const animalItems = [
            { id: "cow", name: "🐄 奶牛", category: "farm" },
            { id: "lion", name: "🦁 狮子", category: "wild" },
            { id: "pig", name: "🐖 猪", category: "farm" },
            { id: "elephant", name: "🐘 大象", category: "wild" },
            { id: "chicken", name: "🐔 鸡", category: "farm" },
            { id: "tiger", name: "🐅 老虎", category: "wild" },
            { id: "sheep", name: "🐑 绵羊", category: "farm" },
            { id: "giraffe", name: "🦒 长颈鹿", category: "wild" }
        ];

        const foodItems = [
            { id: "apple", name: "🍎 苹果", category: "fruit" },
            { id: "carrot", name: "🥕 胡萝卜", category: "vegetable" },
            { id: "banana", name: "🍌 香蕉", category: "fruit" },
            { id: "broccoli", name: "🥦 西兰花", category: "vegetable" },
            { id: "orange", name: "🍊 橙子", category: "fruit" },
            { id: "tomato", name: "🍅 番茄", category: "fruit" },
            { id: "potato", name: "🥔 土豆", category: "vegetable" },
            { id: "grape", name: "🍇 葡萄", category: "fruit" }
        ];

        const seasonItems = [
            { id: "snowman", name: "⛄️ 雪人", category: "winter" },
            { id: "sunglasses", name: "🕶 太阳镜", category: "summer" },
            { id: "mittens", name: "🧤 手套", category: "winter" },
            { id: "icecream", name: "🍦 冰淇淋", category: "summer" },
            { id: "scarf", name: "🧣 围巾", category: "winter" },
            { id: "sunhat", name: "👒 遮阳帽", category: "summer" },
            { id: "hotchocolate", name: "☕️ 热巧克力", category: "winter" },
            { id: "watermelon", name: "🍉 西瓜", category: "summer" }
        ];

        // 当前游戏状态
        let currentShapePattern, currentColorPattern, currentNumberPattern;
        let selectedShapeAnswer, selectedColorAnswer, selectedNumberAnswer;

        // 初始化游戏
        window.onload = function() {
            newShapePattern();
            newColorPattern();
            newNumberPattern();
            setupAnimalGame();
            setupFoodGame();
            setupSeasonGame();
        };

        // 形状模式游戏函数
        function newShapePattern() {
            currentShapePattern = shapePatterns[Math.floor(Math.random() * shapePatterns.length)];
            selectedShapeAnswer = null;
            
            // 显示模式
            const patternElement = document.getElementById("shapePattern");
            patternElement.innerHTML = `<div class="emoji-pattern">${currentShapePattern.pattern.join(" ")} ___</div>`;
            
            // 显示选项
            const optionsContainer = document.getElementById("shapeOptions");
            optionsContainer.innerHTML = "";
            currentShapePattern.options.forEach(option => {
                const btn = document.createElement("button");
                btn.className = "option-btn";
                btn.innerHTML = option;
                btn.onclick = function() { 
                    selectedShapeAnswer = option;
                    document.querySelectorAll("#shapeOptions .option-btn").forEach(b => b.style.background = "#74b9ff");
                    this.style.background = "#0984e3";
                };
                optionsContainer.appendChild(btn);
            });
            
            document.getElementById("shapeFeedback").innerHTML = "";
        }

        function checkShapeAnswer() {
            const feedbackElement = document.getElementById("shapeFeedback");
            if (!selectedShapeAnswer) {
                feedbackElement.innerHTML = "请先选择一个答案！";
                feedbackElement.className = "feedback incorrect";
                return;
            }
            
            if (selectedShapeAnswer === currentShapePattern.answer) {
                feedbackElement.innerHTML = "正确！太棒了！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = `再试一次吧！正确答案是 ${currentShapePattern.answer}`;
                feedbackElement.className = "feedback incorrect";
            }
        }

        // 颜色模式游戏函数
        function newColorPattern() {
            currentColorPattern = colorPatterns[Math.floor(Math.random() * colorPatterns.length)];
            selectedColorAnswer = null;
            
            // 显示模式
            const patternElement = document.getElementById("colorPattern");
            let patternHTML = '<div style="display: flex; justify-content: center;">';
            currentColorPattern.pattern.forEach(color => {
                patternHTML += `<div class="color-dot" style="background-color: ${color};"></div>`;
            });
            patternHTML += '<div style="width: 30px; height: 30px; margin: 5px; display: flex; align-items: center; justify-content: center;">?</div></div>';
            patternElement.innerHTML = patternHTML;
            
            // 显示选项
            const optionsContainer = document.getElementById("colorOptions");
            optionsContainer.innerHTML = "";
            currentColorPattern.options.forEach(option => {
                const btn = document.createElement("button");
                btn.className = "option-btn";
                btn.innerHTML = option;
                btn.style.background = option;
                btn.onclick = function() { 
                    selectedColorAnswer = option;
                    document.querySelectorAll("#colorOptions .option-btn").forEach(b => b.style.background = b.innerHTML);
                    this.style.background = "#0984e3";
                };
                optionsContainer.appendChild(btn);
            });
            
            document.getElementById("colorFeedback").innerHTML = "";
        }

        function checkColorAnswer() {
            const feedbackElement = document.getElementById("colorFeedback");
            if (!selectedColorAnswer) {
                feedbackElement.innerHTML = "请先选择一个答案！";
                feedbackElement.className = "feedback incorrect";
                return;
            }
            
            if (selectedColorAnswer === currentColorPattern.answer) {
                feedbackElement.innerHTML = "正确！太棒了！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = `再试一次吧！正确答案是 ${currentColorPattern.answer}`;
                feedbackElement.className = "feedback incorrect";
            }
        }

        // 数字模式游戏函数
        function newNumberPattern() {
            currentNumberPattern = numberPatterns[Math.floor(Math.random() * numberPatterns.length)];
            selectedNumberAnswer = null;
            
            // 显示模式
            const patternElement = document.getElementById("numberPattern");
            patternElement.innerHTML = `<div style="font-size: 24px;">${currentNumberPattern.pattern.join(", ")}, ___</div>`;
            
            // 显示选项
            const optionsContainer = document.getElementById("numberOptions");
            optionsContainer.innerHTML = "";
            currentNumberPattern.options.forEach(option => {
                const btn = document.createElement("button");
                btn.className = "option-btn";
                btn.innerHTML = option;
                btn.onclick = function() { 
                    selectedNumberAnswer = option;
                    document.querySelectorAll("#numberOptions .option-btn").forEach(b => b.style.background = "#74b9ff");
                    this.style.background = "#0984e3";
                };
                optionsContainer.appendChild(btn);
            });
            
            document.getElementById("numberFeedback").innerHTML = "";
        }

        function checkNumberAnswer() {
            const feedbackElement = document.getElementById("numberFeedback");
            if (!selectedNumberAnswer) {
                feedbackElement.innerHTML = "请先选择一个答案！";
                feedbackElement.className = "feedback incorrect";
                return;
            }
            
            if (selectedNumberAnswer === currentNumberPattern.answer) {
                feedbackElement.innerHTML = "正确！太棒了！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = `再试一次吧！正确答案是 ${currentNumberPattern.answer}`;
                feedbackElement.className = "feedback incorrect";
            }
        }

        // 动物分类游戏函数
        function setupAnimalGame() {
            const itemsContainer = document.getElementById("animalItems");
            itemsContainer.innerHTML = "";
            
            // 随机选择6个动物
            const shuffledAnimals = [...animalItems].sort(() => 0.5 - Math.random()).slice(0, 6);
            
            shuffledAnimals.forEach(animal => {
                const item = document.createElement("div");
                item.className = "draggable-item";
                item.id = animal.id;
                item.draggable = true;
                item.innerHTML = animal.name;
                item.addEventListener("dragstart", drag);
                itemsContainer.appendChild(item);
            });
            
            document.getElementById("farmCategory").innerHTML = "";
            document.getElementById("wildCategory").innerHTML = "";
            document.getElementById("animalFeedback").innerHTML = "";
        }

        function checkAnimalClassification() {
            const feedbackElement = document.getElementById("animalFeedback");
            let allCorrect = true;
            
            // 检查农场动物分类
            const farmItems = Array.from(document.getElementById("farmCategory").children).map(item => item.id);
            const correctFarmItems = animalItems.filter(a => a.category === "farm").map(a => a.id);
            
            for (let id of correctFarmItems) {
                if (!farmItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            // 检查野生动物分类
            const wildItems = Array.from(document.getElementById("wildCategory").children).map(item => item.id);
            const correctWildItems = animalItems.filter(a => a.category === "wild").map(a => a.id);
            
            for (let id of correctWildItems) {
                if (!wildItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            if (allCorrect && farmItems.length + wildItems.length === 6) {
                feedbackElement.innerHTML = "分类完全正确！太聪明了！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = "还有一些动物没有放在正确的分类里，再试试看！";
                feedbackElement.className = "feedback incorrect";
            }
        }

        function resetAnimalGame() {
            setupAnimalGame();
        }

        // 食物分类游戏函数
        function setupFoodGame() {
            const itemsContainer = document.getElementById("foodItems");
            itemsContainer.innerHTML = "";
            
            // 随机选择6个食物
            const shuffledFoods = [...foodItems].sort(() => 0.5 - Math.random()).slice(0, 6);
            
            shuffledFoods.forEach(food => {
                const item = document.createElement("div");
                item.className = "draggable-item";
                item.id = food.id;
                item.draggable = true;
                item.innerHTML = food.name;
                item.addEventListener("dragstart", drag);
                itemsContainer.appendChild(item);
            });
            
            document.getElementById("fruitCategory").innerHTML = "";
            document.getElementById("vegetableCategory").innerHTML = "";
            document.getElementById("foodFeedback").innerHTML = "";
        }

        function checkFoodClassification() {
            const feedbackElement = document.getElementById("foodFeedback");
            let allCorrect = true;
            
            // 检查水果分类
            const fruitItems = Array.from(document.getElementById("fruitCategory").children).map(item => item.id);
            const correctFruitItems = foodItems.filter(f => f.category === "fruit").map(f => f.id);
            
            for (let id of correctFruitItems) {
                if (!fruitItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            // 检查蔬菜分类
            const vegetableItems = Array.from(document.getElementById("vegetableCategory").children).map(item => item.id);
            const correctVegetableItems = foodItems.filter(f => f.category === "vegetable").map(f => f.id);
            
            for (let id of correctVegetableItems) {
                if (!vegetableItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            if (allCorrect && fruitItems.length + vegetableItems.length === 6) {
                feedbackElement.innerHTML = "完美！所有食物都分类正确！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = "还有一些食物放错了位置，再检查一下吧！";
                feedbackElement.className = "feedback incorrect";
            }
        }

        function resetFoodGame() {
            setupFoodGame();
        }

        // 季节物品分类游戏函数
        function setupSeasonGame() {
            const itemsContainer = document.getElementById("seasonItems");
            itemsContainer.innerHTML = "";
            
            // 随机选择6个季节物品
            const shuffledSeasons = [...seasonItems].sort(() => 0.5 - Math.random()).slice(0, 6);
            
            shuffledSeasons.forEach(season => {
                const item = document.createElement("div");
                item.className = "draggable-item";
                item.id = season.id;
                item.draggable = true;
                item.innerHTML = season.name;
                item.addEventListener("dragstart", drag);
                itemsContainer.appendChild(item);
            });
            
            document.getElementById("winterCategory").innerHTML = "";
            document.getElementById("summerCategory").innerHTML = "";
            document.getElementById("seasonFeedback").innerHTML = "";
        }

        function checkSeasonClassification() {
            const feedbackElement = document.getElementById("seasonFeedback");
            let allCorrect = true;
            
            // 检查冬季分类
            const winterItems = Array.from(document.getElementById("winterCategory").children).map(item => item.id);
            const correctWinterItems = seasonItems.filter(s => s.category === "winter").map(s => s.id);
            
            for (let id of correctWinterItems) {
                if (!winterItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            // 检查夏季分类
            const summerItems = Array.from(document.getElementById("summerCategory").children).map(item => item.id);
            const correctSummerItems = seasonItems.filter(s => s.category === "summer").map(s => s.id);
            
            for (let id of correctSummerItems) {
                if (!summerItems.includes(id)) {
                    allCorrect = false;
                    break;
                }
            }
            
            if (allCorrect && winterItems.length + summerItems.length === 6) {
                feedbackElement.innerHTML = "太棒了！季节物品分类完全正确！";
                feedbackElement.className = "feedback correct";
            } else {
                feedbackElement.innerHTML = "还有一些物品不属于这个季节哦，再想想看！";
                feedbackElement.className = "feedback incorrect";
            }
        }

        function resetSeasonGame() {
            setupSeasonGame();
        }

        // 拖放功能函数
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData("text");
            const draggedItem = document.getElementById(data);
            
            // 检查是否已经存在于另一个分类中
            if (draggedItem.parentNode !== ev.target) {
                ev.target.appendChild(draggedItem);
            }
        }
    </script>
<div style="position:fixed;top:10px;right:100px;"><a href="./index.html">返回首页</a></div></body>
</html>